<template>
  <div class="addTable">
    <el-form
      :model="ListData"
      :rules="PrContent"
      ref="ListDatas"
      label-width="100px"
      class="demo-ruleForm ListData_demo"
    >
      <el-form-item label="商品名称" prop="Dish_name">
        <el-input
          type="text"
          placeholder="请输入菜品名称"
          v-model="ListData.Dish_name"
        />
      </el-form-item>
      <el-form-item label="商品价格" prop="Dish_price">
        <el-input
          type="text"
          placeholder="请输入价格"
          v-model.number="ListData.Dish_price"
        />
      </el-form-item>
      <el-form-item label="商品分类" prop="Dish_classification">
        <el-select
          v-model="ListData.Dish_classification"
          placeholder="请选择菜品类型"
        >
          <el-option
            v-for="(dish, fica) in classification"
            :key="fica"
            :label="dish.label"
            :value="dish.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品单位" prop="Dish_types">
        <el-input
          placeholder="份、杯"
          v-model="ListData.Dish_types"
          clearable
        />
      </el-form-item>
      <el-form-item label="商品规格">
        <el-input
          style="width: 130px; margin: 0px 10px 10px 0"
          v-for="(dh, fla) in ListData.Dish_flavor"
          :key="fla"
          placeholder="请输入内容"
          v-model="ListData.Dish_flavor[fla]"
        >
          <template v-slot:suffix>
            <i
              class="el-icon-circle-close"
              @click="deflavor(dh, fla)"
            ></i></template
        ></el-input>
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-circle-plus-outline"
          circle
          @click="addflavor"
        ></el-button>
      </el-form-item>
      <!-- 上传图片 -->
      <el-form-item label="商品图片" prop="Dish_imgs">
        <el-upload
          :action="action"
          accept=".jpg,.png,.webp,.jfif"
          name="file"
          list-type="picture-card"
          :on-success="sussesimg"
          :on-remove="remoimg"
          :file-list="ListData.fileList"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="ListData.fileList" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="addContent('ListDatas')"
          v-if="this.parnull.id == 0"
          >立即创建<i v-if="show" class="el-icon-loading margin-left-xs"></i>
        </el-button>
        <el-button type="primary" @click="setContent('ListDatas')" v-else
          >修改<i v-if="show" class="el-icon-loading margin-left-xs"></i>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import porp from "@/assets/json/addprop.js"; /* 校验规则 */
import business from "@/utils/business";
import increase from "@/utils/increase";
import modify from "@/utils/modify";
export default {
  props: ["id"],
  data() {
    return {
      labtion: [] /* 规格分类 */,
      capacity: [] /* 口味分类 */,
      classification: [] /* 查询菜品分类 */,
      show: false,
      ListData: {
        //创建时间
        Dish_name: "", //菜品名称
        Dish_price: "", //菜品价格
        Dish_types: "", // 份 瓶
        fileList: [], //图片
        Dish_classification: "", //菜品类型 '牛排' '小吃' '饮料' '披萨'
        foid: "", //菜品类型id
        Dish_flavor: [], //菜品口味
      },
      PrContent: [],
      parnull: 0,
      /* upload */
      action: "http://localhost:3301/api/after/sopload",
      dialogVisible: false,
      /* upload */
    };
  },
  created() {
    this.foodtype();
    //校验填写数据规则
    this.PrContent = porp.PrContent;
    this.parnull = this.$router.currentRoute.query;
    this.showSetlist();
  },
  methods: {
    // 图片上传成功
    sussesimg(res, file) {
      this.ListData.fileList.push({ uid: file.uid, url: res.data });
    },
    // 移除照片
    remoimg(file, fileList) {
      this.ListData.fileList = [];
    },
    // 添加商品
    addContent(ListDatas) {
      let _this = this;
      this.$refs[ListDatas].validate((valid) => {
        if (valid) {
          console.log("添加的内容:", this.ListData);
          increase
            .addshpping(this.ListData)
            .then((res) => {
              if (res.status == 200) {
                this.$message.success(res.data.msg);
                setTimeout(function () {
                  _this.$refs["ListDatas"].resetFields();
                  _this.remoimg();
                }, 500);
              } else {
                this.$message.error(res);
              }
            })
            .catch((error) => {
              this.$message.error(error);
            });
          _this.show = true;
          setTimeout(function () {
            _this.show = false;
          }, 1500);
        } else {
          return false;
        }
      });
    },
    // 添加口味输入框
    addflavor() {
      this.ListData.Dish_flavor.push("");
    },
    // 移除口味输入框
    deflavor(item, index) {
      let num = 1;
      this.ListData.Dish_flavor.splice(index, num);
    },
    // 修改前查询
    async showSetlist() {
      // 获取修改内容
      if (this.parnull.id == 0) {
        return 0;
      } else {
        modify
          .showlistID(this.parnull)
          .then((res) => {
            let flavor = res.data.data[0].flavor;
            let price = res.data.data[0].price;
            let spname = res.data.data[0].spname;
            let classification = res.data.data[0].classification;
            let image = res.data.data[0].image;
            let types = res.data.data[0].types;
            let uid = res.data.data[0].uid;

            this.ListData.Dish_name = spname;
            this.ListData.Dish_price = price;
            this.ListData.Dish_types = types;
            this.ListData.fileList = [{ uid: uid, url: image }];
            this.ListData.Dish_flavor = flavor;
            this.ListData.Dish_classification = classification;
          })
          .catch((error) => {
            this.$message.error("获取信息失败!");
            return error;
          });
      }
    },
    // 修改数据内容
    setContent(ListDatas) {
      let _this = this;

      this.$refs[ListDatas].validate((valid) => {
        if (valid) {
          modify
            .setlistID(this.ListData)
            .then((res) => {
              // if (res.status == 200) {
              //   this.$message.success("修改成功!");
              // } else {
              //   this.$message.error(res);
              // }
            })
            .catch((error) => {
              this.$message.error(error);
            });
          _this.show = true;
          setTimeout(function () {
            _this.show = false;
          }, 1500);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 获取商品分类
    foodtype() {
      // 查询菜品分类
      business
        .foodtype({})
        .then((res) => {
          this.classification = res.data.data;
        })
        .catch((error) => {
          return error;
        });
    },
  },
};
</script>

<style lang="less" scoped>
/* 图片样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* 图片样式 */
.ListData_demo {
  .el-form-item {
    .el-form-item__content {
      display: flex;
      margin-right: 10px;
      .el-input {
        width: 250px;
      }
    }
  }
}
.addTable {
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}

.margin-left-xs .el-form-item__content {
  margin-left: 10px !important;
}
</style>